تغییر فونت و مشخصات متون یکی از امکانات پر استفاده در طراحی ظاهر صفحات اچ تی ام ال است و بدون شک بدرد شما هم بسیار خواهد خورد. با ما همراه باشید تا در این بخش به شما نحوه تغییرات در فونت‌ها و متون‌ها را آموزش دهیم.
در ادامه با کافه دوستی همراه باشید.
برای تغییر در نوشته‌ها و به طور کلی هر المان اچ تی ام ال لازم است که کلمه دیگری را به تگ آن‌ها بیفزاییم. به این کلمه اضافی اتریبیوت استایل می‌گوییم. استایل در واقع مجموعه‌ای از صفات را برای المان‌های اچ تی ام ال مشخص می‌کند و البته فقط مختص به متن نیست و المان های دیگر نیز از این تگ برای ایجاد تغییرات در صفحه اچ تی ام ال استفاده می‌کنند. مثلا رنگ، اندازه و ... صفاتی هستند که توسط اتریبیوت استایل در صفحه مشخص می‌شوند. البته بعد از یادگیری CSS تمامی استایل‌ها در فایل CSS مورد استفاده می‌شود و کمتر پیش می‌آید که نیاز به استفاده از استایل‌ها در درون صفحه اچ تی ام ال داشته باشیم. ولی با توجه به لزوم یادگیری مباحث استایل در اچ تی ام ال, این بخش را برای شما به آموزش این موضوع اختصاص داده‌ایم.
نحوه‌ی استفاده از اتریبیوت استایل نیز بسیار ساده است و تنها کافیست تا کلمه Style را در کنار نام تگ در تگ شروع کننده بنویسیم. همانند زیر:
<tag name Style="style1; style2; style3;">محتوا با استایل دلخواه</tagname>
برای درک بهتر در مثال زیر ما می‌خواهیم بر روی المان P تغییراتی را ایجاد نماییم.
مرحله اول: تگ اچ‌تی‌ام‌ال مورد نظر را آغاز می‌کنیم؛ مثلا قصد تغییر در المان <p> را داریم.
مرحله دوم: اتریبیوت استایل style را به المان مورد نظر اضافه می‌کنیم و بعد از آن یک علامت ""= می‌گذاریم :
<"استایل‌های مورد نظر"= p style>
مرحله سوم: حالا در بین دو علامت " " آن چیزهایی که می‌خواهیم در المان ما تغییر کند می‌نویسیم. مثلا در پاراگراف نوع فونت یا اندازه فونت را می‌نویسیم.
در این مثال برای تغییر فونت از font-family استفاده می‌کنیم و در روبروی آن، نوع فونت دلخواه را می‌نویسیم. مثلا برای فونت (Tahoma) می‌نویسیم: <;p style = "font-family: Tahoma> .
بعد از نوشتن هر استایل و نوع آن حتما از علامت ; استفاده می‌کنیم. این علامت در واقع بین تمامی استایل‌ها قرار می‌گیرد و آن‌ها را از هم جدا می‌کند. دقت داشته باشید که استفاده از این علامت به طور کلی اهمیت زیادی دارد و به صفحه می‌فهماند که شما در حال تغییر استایل‌های صفحه هستید.
به مثال زیر توجه کنید:
</h1> متن قرار گرفته در اینجا آبی رنگ خواهد شد < " ; h1 style = " color : blue>
در این مثال با h1 را با اتریبیوت استایل به رنگ آبی در آورده‌ایم. در نتیجه رنگ نهایی آن آبی خواهد شد.
حالا که با نحوه کلی استفاده از اتریبیوت style آشنا شدیم، قصد داریم تا استایل‌های قابل استفاده بیشتری را در مشخصه فونت برایتان معرفی کنیم:
font-family - نوع فونت:
اگر قصد تغییر نوع فونت را دارید, با استفاده از این استایل می‌توانید نوع فونت (مثلا tahoma، Times New Roman و ...) را تغییر دهید. همچنین امکان اضافه کردن فونت‌های دلخواه به صفحه از طریق CSS نیز وجود دارد که ما این کار را به دوره آموزشی CSS موکول کرده‌ایم. در صورتی که نام فونت را اشتباه بزنید، امکان عدم نمایش فونت شما وجود دارد و در این حالت مرورگر فونت پیش فرض را جایگزین خواهد کرد.
<p/> متن اینجا با فونت Tahoma ایجاد خواهد شد.<" ; p style = " font-family : Tahoma>
font-Size - ابعاد فونت:
اندازه‌ی فونت بر حسب پیکسل (مثلا 10px یا 12 px و ...) بیان می‌شود. البته مقیاس‌های دیگری به غیر از پیکسل نیز وجود دارند که از جمله آن‌ها می‌توان به em اشاره نمود. در کل پیشنهاد می‌شود که برای ابعاد فونت از مقیاس پیکسل استفاده نمایید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه ابعاد مورد نظر:font-size را می‌نویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم. مشاهده خواهید که متن شما با اندازه دلخواه به نمایش در خواهد آمد.
<p/> متن اینجا با فونت 10px ایجاد خواهد شد.<" ; p style = " font-size: 10px >
color - رنگ فونت :
رنگ متن‌ها را در اچ تی ام ال به دو شکل می‌توان تعیین کرد. در حالت اول, رنگ نوشته‌ها را با رنگ‌های پیش فرض (مثلا blue، yellow یا ...) مشخص می‌کنند. در این حالت انتخاب‌ها به رنگ‌های از پیش تعریف شده محدود می‌شود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آن‌ها در کنار علامت # استفاده کنید. مثلا 888888# رنگ سفید یا FF330A# رنگ نارنجی است. برای به دست آوردن کد رنگ‌ها می‌توانید از نرم افزارهای گرافیکی همچون فوتوشاپ یا سرویس‌های آنلاین همچون HTML Color یا HTML Color picker استفاده نمایید.
به مثال زیر نگاه کنید تا نحوه‌ی تغییر رنگ المان در اچ تی ام ال را بیاموزید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه color: رنگ مورد نظر را می‌نویسیم. رنگ مورد نظر یا کد شش رقمی رنگ است یا اسم رنگ همانند(yellow, Blue و یا ...)
<p style="color: #11111; font-family: tahoma;">متن با فونت تاهما و رنگ سفید </p>
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم. مشاهده خواهید که متن شما با رنگ دلخواه به نمایش در خواهد آمد.
هم تراز کردن - text-align:
یکی دیگر از موارد قابل استفاده در اتریبیوت استایل در متن‌ها text-align است. این خصوصیت به شما کمک می‌کند تا متن‌هایتان را چپ چین, راست چین یا وسط چین کنید. نوشتن این مولفه‌ها نیز کاملا مشابه قبلی‌هاست و تنها کافیست همانند قبل مراحل زیر را طی کنید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه text-align:center را برای وسط چین می‌نویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم و از دیدن نتیجه صفحه لذت می‌بریم.
<h1 style="text-align:center"> متن وسط صفحه قرار می‌گیرد </h1>
<p style="text-align:right"> متن سمت راست صفحه قرار می‌گیرد </p>
<p style="text-align:left"> متن سمت چپ صفحه قرار می‌گیرد </p>
نمونه کد
<h1 style="text-align:center"> متن وسط صفحه قرار می‌گیرد </h1>
<p style="text-align:right"> متن سمت راست صفحه قرار می‌گیرد </p>
<p style="text-align:left"> متن سمت چپ صفحه قرار می‌گیرد </p>
نتیجه‌ای که مرورگر نمایش خواهد داد
متن وسط صفحه قرار می‌گیرد
متن سمت راست صفحه قرار می‌گیرد
متن سمت چپ صفحه قرار می‌گیرد
پر رنگ کردن متن - bold
گاهی پیش می‌آید که بخواهیم بخشی از متن را پررنگ‌تر کنیم تا توجه بیشتری از کاربران جلب کند. برای این کار بهترین کار استفاده از تگ‌هایی است که متن را بولد (bold) می‌کند. برای این کار باید کلمه یا متنی که می‌خواهیم پر رنگ شود را در بین دو تگ <strong></strong> قرار دهیم. البته تگ <b></b> نیز دقیقا کار مشابهی را انجام می‌دهد. توجه داشته باشید که کل متن را بولد نکنید چون نه تنها این کار باعث توجه کاربر نمی‌شود، بلکه ممکن است از زیبایی طرح شما کاسته شود. همچنین تگ <B> برای موتورهای جستجو ملاک محسوب می‌شود.
برای مثال ما می‌خواهیم کلمه اچ تی ام ال را در متن زیر پر رنگ نماییم.
<p> ما در حال یادگیری اچ تی ام ال هستیم </p>
برای این کار دور کلمه اچ تی ام ال تگ <b></b>قرار دهیم.
<p>هستیم<b>اچ تی ام ال</b> ما در حال یادگیری </p>
italic کردن که حروف را حالت مورب می‌کند (مثال: متن ایتالیک) نیز با تگ <em>متن </em> انجام می‌شود. برای این کار مشابه قبل ابتدا متن را در تگ پاراگراف می‌نویسید و سپس بخشی از آن را که می‌خواهید ایتالیک کنید در بین دو تگ <em></em> قرار می‌دهیم.
<p>I am <em>so</em> tired.</p>
نمونه کد
<p>است<em>آسان</em> بسیار <b> اچ تی ام ال </b>یادگیری </p>
نتیجه‌ای که مرورگر نمایش خواهد داد
یادگیری اچ تی ام ال بسیار آسان است
همانطور که مشاهده می‌کنید، در بین متن با استفاده از تگ‌های b و e,m موفق شدیم تا بخش دلخواهمان را به صورت بولد و پررنگ یا ایتالیک در بیاوریم. حالا در ادامه خلاصه‌ای از آنچه در این جلسه گفته شده است را با هم مرور خواهیم کرد.
خلاصه قسمت هشتم:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.
- در هشتمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه تغییر در فونت‌ها با کمک اتریبیوت استایل آشنا شدیم.
- اتریبیوت استایل خواص بسیار دیگری نیز دارد و در تگ‌های دیگر هم به کار می‌رود.
- اتریبیوت استایل برای تگ پاراگراف <p> دارای مولفه‌هایی از جمله font-family, font-size و color است.
- مثال یک پاراگراف با استایل دلخواه:
<p/> متن با رنگ قرمز, فونت با اندازه 10px و Tahoma است.
<" ; p style = " font-family : Tahoma ; font-size : 10px; color: red > - برای چپ چین یا راست چین یا وسط چین کردن متن از کلمه
text-alignاستفاده می‌کنیم و در آن کلمه center, left یا right برای چپ وسط یا راست قرار دادن متن به کار می‌بریم. - برای پر رنگ کردن متن‌ها نیز تنها باید از تگ
<b> </b>یا<strong></strong>استفاده کرد. - برای ایتالیک(مورب کردن متن) باید از تگ
<em></em>
امید است که در این قسمت هم توانسته باشیم نظر شما کافه دوستی های عزیز را جلب کرده باشیم. قسمت بعدی سه شنبه اضافه می شود.
از لینک های آماده شده ی زیر می توانید به قسمت های قبل دسترسی داشته باشید.
تایم لپس چیست ؟ طرز کار تصاویر Time Lapse شارژ کردن گوشی با شارژر های مختلف آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف جوانسازی پوست فقط در 28 روز !؟ سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!! جرم گرفتن دندان به دلیل 7 خطا